<template>
	<view class="logo_main">
		<view class="title_log_in">
			注册并登录
		</view>
		<view class="login">
			<uni-forms :modelValue="registerForm">
				<uni-easyinput type="number" placeholderStyle="font-size:28rpx;" v-model="registerForm.phone"
					maxlength="11" placeholder="请输入手机号" />
				<uni-easyinput type="password" placeholderStyle="font-size:28rpx;" v-model="registerForm.password"
					placeholder="请输入密码" @input="nextTick(()=>registerForm.password=pattern($event))" />
				<uni-easyinput type="password" placeholderStyle="font-size:28rpx;" v-model="registerForm.password2"
					placeholder="确认密码" @input="nextTick(()=>registerForm.password2=pattern($event))" />
				<view class="code_re">
					<uni-easyinput type="number" placeholderStyle="font-size:28rpx;" :clearable="false" maxlength="6"
						v-model="registerForm.code" placeholder="请输入验证码" />
					<view class="code_text" @click="getCode" v-if="count==0">
						获取验证码
					</view>
					<view class="code_text_" v-else>
						({{count}}s)后重新获取
					</view>
				</view>
			</uni-forms>
		</view>
		<view class="look_agree">
			<radio :checked="checked" @click="radioChange" color="#007cff" style="transform:scale(0.8)"></radio>
			<view class="l_text">我已阅读并同意<view class="link_a">《服务协议》</view>和<view class="link_a">《隐私政策》</view>
			</view>
		</view>
		<view class="btn">
			<button type="primary" color="#10a9e6"
				:class="{btn_bg:registerForm.phone?.length==11&&registerForm.password&&checked&&registerForm.code.length==6}"
				class="btn_sty"
				:disabled="!(registerForm.phone?.length==11&&registerForm.password&&checked&&registerForm.code.length==6)"
				@click="onRegister">注册并登录</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref,
		onMounted,
		nextTick
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import apiCode from '@/util/api/getcode.js'
	import apiLogin from '@/util/api/login.js'
	import md5 from 'js-md5';
	const registerForm = ref({
		phone: '', //手机号
		password: '', //登录密码
		password2: '',//确认密码
		code: "", //验证码
		accountRegistLogin: true, //账号注册并登录
		type: 1, //登录类型：1-验证码登录，2-账号密码登录,示例值(1)
	})
	const checked = ref(true) //协议
	const radioChange = (e) => {
		checked.value = !checked.value
	}
	// 校验密码非中文
	const pattern = (v) => {
		return v.replace(/[\u4E00-\u9FA5\s]/g, '')
	}
	const count = ref(0) //倒计时
	const clear = ref(null)
	onLoad((option) => {
		if (option.phone) {
			uni.showToast({
				title: '该账号未注册',
				icon: 'none',
				position: 'top'
			})
			registerForm.value.phone = option.phone||''
		}

	})
	// 获取验证码
	const getCode = async () => {
		if (!/^1[^1^2]\d{9}$/.test(registerForm.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		count.value = 59
		clear.value = setInterval(() => {
			count.value -= 1
			if (count.value == 0) {
				clearInterval(clear.value)
			}
		}, 1000)
		await apiCode.loginCode({
			phone: registerForm.value.phone
		}).then(res => {
			if (res.code === 20000) {
				uni.showToast({
					title: res.message,
					icon: 'none',
					position: 'top',
				})
			}
		})
	}

	// 注册登录
	const onRegister = async () => {
		if (!/^1[^1^2]\d{9}$/.test(registerForm.value.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}

		if (registerForm.value.password == '') {
			uni.showToast({
				title: '请输入密码!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (registerForm.value.password != registerForm.value.password2) {
			uni.showToast({
				title: '密码不一致!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (!checked.value) {
			if (registerForm.value.code == '') {
				uni.showToast({
					message: '请输入验证码!',
					position: 'top'
				});
				return;
			}
			uni.showToast({
				title: '请勾选同意!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		await successfullyLogin()
	}
	const successfullyLogin = async () => {
		//显示加载框
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		let dataObj = JSON.parse(JSON.stringify(registerForm.value))
		dataObj.password = (md5 as any)(registerForm.value.password)//加密
		await apiLogin.login(dataObj).then(res => {
			//隐藏加载框
			if (res.code === 20000) {
				const logintime = new Date().getTime()
				let dataValue = {
					logintime: logintime, //当前登录时间戳
					token: res.data.row.tokenValue,// 设置token值
					refreshToken: res.data.row.refreshToken,//刷新token
					tokenName: res.data.row.tokenName,//token请求头
					timeToken: res.data.row.expireIn//过期时间(秒)
				}
				uni.setStorageSync('access-user', dataValue)
				// 登录成功后跳转
				uni.redirectTo({
					url: '/pages_user/home/home'
				})
			}
		})
		uni.hideLoading();
	}
</script>

<style lang="scss" scoped>
	.logo_main {
		padding: 10rpx 60rpx 0rpx;
		box-sizing: border-box;
		background-color: #fff;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */

		.title_log_in {
			font-size: 48rpx;
			margin: 40rpx 0;
			color: #007cff;
		}

		.login {
			:deep(.is-input-border) {
				background-color: transparent !important;
				margin: 20rpx 0;
				border: none;
				border-bottom: 1rpx solid #ccc;
				border-radius: 0;
				height: 90rpx;

				&.is-focused {

					.uniui-clear,
					.uniui-eye-filled {
						color: #007cff99 !important;
					}
				}
			}

			.code_re {
				position: relative;

				.code_text {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 28rpx;
					color: #007cff;
					position: absolute;
					top: calc(50% - 15rpx);
					right: 30rpx;
					z-index: 2;
				}

				.code_text_ {
					height: 30rpx;
					line-height: 30rpx;
					font-size: 28rpx;
					color: #999;
					position: absolute;
					top: calc(50% - 15rpx);
					right: 30rpx;
				}
			}

		}

		.hint {
			margin-left: 60rpx;
			margin-bottom: 10rpx;
		}

		.look_agree {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: rgba(128, 128, 128, 1);

			.l_text {
				display: flex;
				align-items: center;

				.link_a {
					color: #007cff;
				}
			}
		}

		.btn {
			margin-top: 40rpx;

			.btn_sty {
				border-radius: 80rpx;
				background-color: #007cff6b;
				line-height: 90rpx;
				height: 90rpx;
				font-size: 32rpx;
				color: #fff;
			}

			:deep(button::after) {
				border: none !important;
			}

			.btn_bg {
				background-color: #007cff;
			}
		}

	}
</style>